<template>
	<el-card>
		<template #header>
			<el-button
				type="primary"
				@click="onEdit(CATEGORY_OPS_TYPE.add)"
				>添加分类</el-button
			>
		</template>

		<!-- 表格 -->
		<el-table
			:data="categoryData"
			style="width: 100%; margin-bottom: 20px"
			row-key="id"
			border
			default-expand-all
		>
			<el-table-column prop="name">
				<template #header>分类名称</template>
				<template #default="{ row }">
					{{ row.name }}
				</template>
			</el-table-column>
			<el-table-column
				label="分类级别"
				sortable
			>
				<template #default="{ row }">
					<span v-if="row.pid === 0">一级分类</span>
					<span v-else>二级分类</span>
				</template>
			</el-table-column>
			<el-table-column label="分类编号">
				<template #default="{ row }">
					{{ row.id }}
				</template>
			</el-table-column>
			<el-table-column label="分类图片">
				<template #default="{ row }">
					<img
						v-if="row.picture"
						:src="row.picture"
						alt="picture"
					/>
				</template>
			</el-table-column>
			<el-table-column
				label="操作"
				width="180"
			>
				<template #default="{ row }">
					<el-button
						type="warning"
						@click="onEdit(CATEGORY_OPS_TYPE.modify, row)"
						>编辑</el-button
					>
					<el-button
						type="danger"
						@click="delCategoryById(row.id)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
	</el-card>

	<!-- 修改分类的对话框 -->
	<el-dialog
		:model-value="visible"
		:title="title"
		width="600"
		:before-close="onClose"
		@open="keyEdit = Date.now()"
	>
		<category-edit
			ref="categoryEditRef"
			:key="keyEdit"
			:id="categoryId"
			:currentType="currentType"
			@onFisish="onFisish"
		/>
	</el-dialog>
</template>

<script setup>
	import { computed, ref } from 'vue'
	import { getCategoryApi, delCategoryByIdApi } from '@/api/category'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import CategoryEdit from '@/components/CategoryEdit.vue'
	// 导入操作类型
	import { CATEGORY_OPS_TYPE, CATEGORY_MAP } from '@/constant/category'
	// 分类数据
	let categoryData = ref([])
	// 是否显示对话框
	const visible = ref(false)
	// 编辑框所需要的元素
	const rowData = ref(null)
	// 编辑的 id
	const categoryId = ref(0)
	// categoryEditRef的DOM
	const categoryEditRef = ref(null)
	// cateEdit 的key
	const keyEdit = ref(Date.now())

	// 标题
	const title = computed(() => {
		return CATEGORY_MAP[currentType.value]
	})
	// 当前的状态
	const currentType = ref(null)

	// 将数据变为树形
	const getTree = (data) => {
		const retTree = []
		data.forEach((v) => {
			if (v.pid === 0) {
				// 根节点
				retTree.push({ ...v, children: [] })
			} else {
				const father = retTree.find((ele) => ele.id === v.pid)
				father.children.push({ ...v })
			}
		})

		return retTree
	}

	// 获取数据
	const getData = async () => {
		const ret = await getCategoryApi()
		categoryData.value = getTree(ret.data)
	}
	getData()

	// 查询根节点
	const findBase = (id) => {
		return categoryData.value.find((ele) => ele.id === id)
	}

	// 删除数据
	async function delCategoryById(categoryId) {
		try {
			// 先判断是否是子元素
			const node = findBase(categoryId)

			// 它是根节点并且孩子不为空
			if (node && node.children.length) {
				return ElMessage.warning({
					message: '不能删除有子节点的一级目录',
				})
			}

			await ElMessageBox.confirm('确定要删除么', '删除分类信息', {
				type: 'warning',
				confirmButtonText: '确认',
				cancelButtonText: '取消',
			})
			// 确认要删除
			await delCategoryByIdApi(categoryId)
			// 重新刷新
			getData()
		} catch (e) {}
	}

	// 编辑
	const onEdit = (type, row) => {
		// 设置编辑状态
		currentType.value = type
		categoryId.value = row && row.id
		// 寻找对应的根节点
		let superData = row && row.pid !== 0 && findBase(row.pid) // 父节点的名字
		rowData.value = {
			data: row, // 当前节点
			superData, // 父节点元素
		}
		// 显示对话框
		visible.value = true
	}

	// 关闭
	const onClose = async (done) => {
		try {
			if (done !== '提交') {
				await ElMessageBox.confirm('确认退出吗', '警告', {
					title: '警告',
					confirmButtonText: '确认',
					cancelButtonText: '取消',
				})
			}
			visible.value = false
			done()
		} catch (e) {}
	}

	// 提交对话框
	const onFisish = (type) => {
		onClose(type)
		getData()
	}
</script>

<style scoped lang="scss">
	.el-table {
		img {
			width: 100px;
			height: 70px;
		}
	}

	.el-messagebox {
		padding: 0;
	}
</style>
